import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
// Vue.config.devtools = false
// Vue.config.silent = true;
// console.log('Vue.config.silent==>',Vue.config.silent)
//引用router.js
import router from './router/index'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
// console.log('这条日志信息只在开发环境中输出。');

// Vue.config.optionMergeStrategies.data = function (toVal, fromVal) {
//   console.log('++toVal++',toVal);
//   console.log('++fromVal++',fromVal);

//   if (!toVal) {
//     return fromVal;
//   }
//   if (!fromVal) {
//     return toVal;
//   }
//   return function mergedDataFn2() {
//     return Object.assign({}, fromVal.call(this), toVal.call(this));
//   };
// };
// Vue.mixin({
//   data() {
//     return {
//       name: 'globalName',
//     };
//   },
// })

// Vue.config.optionMergeStrategies.nickName = function (parentVal, childVal) {
//   // return mixinV || appV
//   console.log('1',parentVal);
//   console.log('2',childVal);
//   return childVal === undefined
//     ? parentVal
//     : childVal
//   }
// const MyComponent = Vue.extend({
//   template: `1111111111111111`,
//   data() {
//       return {
//           message: 'Hello, Vue!'
//       }
//   },
//   created() {
//       console.log('mount-point1==');
//   }
// })
// new MyComponent().$mount('#mount-point1')



// Vue.mixin({
//   created() {
//     console.log('=========mix=============')
//   }
// });

// Vue.observable({
//   globalName: '我是全局属性',
//   globalAge: 18
// })
// Vue.config.optionMergeStrategies.custom = (toVal, fromVal, vm) => {
//   console.log(toVal, fromVal)
//   console.log(vm)
//   return fromVal || toVal
// }



// var Profile = Vue.extend({
//   template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
//   data: function () {
//     return {
//       firstName: 'Walter',
//       lastName: 'White',
//       alias: 'Heisenberg'
//     }
//   }
// })
// // 创建 Profile 实例，并挂载到一个元素上。
// new Profile().$mount('#mount-point')



Vue.filter('reverse', function (value) {
  // 将字符串反转
  const isVIP = !false
  if (isVIP) {
    return value + '￥'
  } else {
    return '--'
  }

})

// Vue.mixin({
//   created() {
//     console.log('hello from mixin!')
//   },
// })
// Vue.config.optionMergeStrategies.methods = function (toVal, fromVal) {
//   console.log("toVal:::",toVal);
//   console.log("fromVal:::",fromVal);
// }
// 定义一个混入对象
// var myMixin2 = {
//   created: function () {
//     this.hello()
//   },
//   methods: {
//     hello: function () {
//       console.log('hello from mixin!')
//     }
//   }
// }
// // 定义一个使用混入对象的组件
// var Component = Vue.extend({
//   mixins: [myMixin2]
// })

// new Component() // => "hello from mixin!"



// Vue.component('my-component', MyComponent)
// Vue.component('my-component2222', {
//   template: '<div>{{ message }}</div>',
//   data() {
//     return {
//       message: 'Hello, Vue22222222222!'
//     }
//   },
//   created(){
//     console.log('Vue22222222222');
//   }
// })
// 定义一个混入对象
// const myMixin = {
//   data() {
//     return {
//       message: 'aaa'
//     }
//   },
//   methods: {
//     sayHello() {
//       console.log('ccc')
//     }
//   }
// }
// Vue.component('my-component', {
//   template: '========================',
//   mixins: [myMixin],
//   data() {
//     return {
//       message: 'bbb'
//     }
//   },
//   methods: {
//     // sayHello() {
//     //   console.log(this.message)
//     // }
//   },
//   mounted() {
//     console.log(this.message) // Hello, component!
//     this.sayHello() // Hello, component!
//   }
// })
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
  console.error('global=err>', err)
  console.error('global=vm>', vm)
  console.error('global=info>', info)
  //   err：表示未处理的JavaScript错误对象。
  // vm：表示触发错误的Vue实例。
  // info：表示一个包含有关错误的详细信息的字符串。比如错误所在的生命周期钩子
}
Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` 是组件的继承关系追踪
  console.warn('msg>>>>', msg)
  console.warn('vm>>>>', vm)
  console.warn('trace>>>>', trace)
}
// Vue.config.warnHandler = function (msg, vm, trace) {
//   console.warn(`Vue warning: "${msg}"`, vm, trace);
//   alert(`Vue warning: "${msg}"`);
// }
// Vue.config.ignoredElements = [/^my-/, /^xxx-/]
// console.log('===>>>>',Vue.config.performance = true);
// console.log('===>',Vue.config.silent = true)
// console.log('===>',Vue.config.devtools)
// export const eventBus = new Vue(); // creating an event bus.



// import Vue from "vue";

Vue.config.keyCodes = {
  v: 87,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87],
}


// Vue.config.performance = true; // 开启性能追踪
// 创建构造器
// var Profile = Vue.extend({
//   template: '<p>extend--------extend---------extend</p>',
// })
// new Profile().$mount('#mount-point-test')
// Vue.component('my-test-com',Profile)

// const MyPlugin = {
//   install(Vue, options) {
//     Vue.prototype.$myMethod = function() {
//       console.log('This is my plugin method!')
//       console.log(options.option1)
//       console.log(options.option2)
//     }
//   }
// }
// Vue.use(MyPlugin, { option1: 'value1', option2: 'value2' })
//组件中 this.$myMethod()


const MyPlugin1 = {
  install(Vue, options) {
    Vue.prototype.$print = function () {
      console.log('自定义打印插件', options);
    }
  }
}
const options = {
  name: '张三',
  age: 18,
}
Vue.use(MyPlugin1, options)


Vue.component('async-example', {
  template: '<p>我是异步组件</p>'
})


Vue.component('my-custom-element', {
  data() {
    return {
      title: 'hello',
    };
  },

  render(h) {
    const that = this
    const ipnutVnode = h('input', {
      style: {
        border: '1px solid red',
        color: 'red',
        width: '300px'
      },
      on: {
        input(e) {
          that.title = e.target.value
        }
      },
      domProps: {
        value: '绑定原生属性'
      }
    })
    const textVnode = h('p', this.title)
    return h('div', [ipnutVnode, textVnode])
  }






})






// Vue.component('blog-post', {
//   render: function (createElement) {
//     return createElement('div', [
//       createElement('header', [
//         this.$slots.myheader,
//         this.$scopedSlots.myheader({
//           text: '66666'
//         })
//       ]),
//       createElement('main', this.$slots.default),
//       createElement('footer', this.$slots.myfooter),
//     ])
//   }
// })
// const AAAA = Vue.extend( {
//   props: ['title'],
//   template: `<h3>{{ title }}11111111111
//   <div id="mount-point-test"></div>
//   </h3>`,
// })
// var Comp = Vue.extend({
//   props: ['msg'],
//   template: '<div>{{ msg }}<<<====</div>'
// })

// new Comp({
//   propsData: {
//     msg: 'hello'
//   }
// }).$mount('#mount-point-test-2')
// Vue.component('myblog-post1',Comp)
Vue.component('myblog-post2', {
  props: ['title'],
  template: '<h3>{{ title }}22222111222222</h3>',
  mounted() {
    console.log("this.$listeners===>", this.$listeners);
  },
})
// Vue.component('myblog-post3', {
//   props: ['title'],
//   model: {
//     prop: 'title',
//     event: 'input'
//   },
//   template: `
//    <input :value="title" @input="methodName" >
//   `,
//   methods: {
//     methodName(event) {
//       console.log('88888888888888888', event.target.value);
//       this.$emit('input', event.target.value)
//     },
//   },

// })
// Vue.component('MyBlogPost4', {
//   template: '<h3>{{ title }}44444444</h3>',

// })
// Vue.directive('focus', {
//     inserted: function (el) {
//         el.focus()
//     }
// })
// Vue.directive('focus1',{
//   inserted(e){
//     e.focus()
//   }
// })

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    num: String,
    checked: Boolean
  },
  inject: {
    foo: {
      default: '8888',
    }
  },
  //   template: `
  // <div>
  // <div>
  // {{ num }}===>{{ foo }}
  // </div>
  // <button @click="addNum">+</button>
  // </div>
  //   `,
  template: `<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>`,
  methods: {
    addNum() {
      // console.log('111', this.foo);
      this.$emit('update:num', 'newTitle')
    },
  },
})

// Vue.component('blog-post-slot', {
//   render: function (createElement) {
//     var header = this.$slots.myhheader
//     var body = this.$slots.default
//     var footer = this.$slots.myfooter
//     return createElement('div', [
//       createElement('header', header),
//       createElement('main', body),
//       createElement('footer', footer),
//     ])
//   }
// })
// var MyComponentA = Vue.extend({
//   template: '<div>{{ message }}</div>',
//   data: function () {
//     return {
//       message: 'HelloWorld of MyComponentA!'
//     }
//   }
// })

// Vue.component('my-component-a', MyComponentA)
// new MyComponentA().$mount('#MyComponentByID')

// Vue.component('my-component-b', {
//   template: '<div>{{ message }}</div>',
//   data: function () {
//     return {
//       message: 'HelloWorld of MyComponentB!'
//     }
//   }
// })
//使用Vue.extend创建组件可以继承另一个组件并修改其行为。这种方法通常用于创建可复用的组件
//使用Vue.component创建组件可以注册全局组件，这些组件可以在整个应用程序中使用。这种方法通常用于创建可复用的UI组件\
//extend 创建的是 Vue 构造器
//需要通过 new Profile().$mount('#mount-point') 来挂载到指定的元素


// var baseComponent = Vue.extend({
//   template: '<div>{{ message }}-{{count}}</div>',
//   data: function () {
//     return {
//       message: 'Hello Vue.js!'
//     }
//   }
// })
// var extendedComponent = baseComponent.extend({
//   data: function () {
//     return {
//       message: 'Hello extended component!',
//       count: 100
//     }
//   }
// })
// // new extendedComponent().$mount('#MyComponentByID')


// Vue.component('my-component-c', extendedComponent)

// //Vue.component用于全局注册组件，
// //Vue.extend用于定义局部组件的构造器

Vue.component('test-render', {
  props: {
    argument1: {
      default: 1
    },
  },
  data() {
    return {
      name: '张三',
    };
  },
  render(createElement) {
    // const that = this
    const temp = Vue.component('testTemp', {
      template: '<div>{{name}}<===</div>',
      data() {
        return {
          name: 'value1',
        };
      },
    })
    const componentofli1 = createElement('li',
      {
        props: ['argument6']
      },
      '列表1' + this.argument1 + this.argument6)
    const componentofli2 = createElement('li', '列表2')
    const componentofli3 = createElement('li', '列表3')
    const componentof4 = createElement(temp)
    const componentoful = createElement('ol',{
      props: ['argument6']
    }, [componentofli1, componentofli2, 
      componentofli3, componentof4])
    return createElement('div', {
      style: {
        color: "red",
        border: "1px solid red",
        fontSize: "18px"
      },
      class: ['name1', 'name2', 'name3',],

    }, [componentoful])
  }
})

// Vue.config.silent = true
new Vue({
  render: h => h(App),
  store, // 使用store
  router,//整个应用支持路由
  delimiters: ['${', '}'],
  comments: true,
}).$mount('#app')
